<template>
  <div id="app">
    <Home />
  </div>
</template>

<script>
import Home from "./views/Home.vue";

export default {
  components: {
    Home,
  },
  created() {
    this.changeRem();
    window.addEventListener("resize", this.changeRem);
    //去除上拉空白、下拉空白
    document.body.addEventListener(
      "touchmove",this.preventScroll(),
      {
        passive: false,//表示我现在主动告诉浏览器该监听器将使用e.preventDefault()来阻止浏览器默认的滚动行为（可以提高运行速度）;passive 参数不能省略，用来兼容ios和android,如果不加passive:false,在 ios 上是不能起作用的,IOS默认值为true
      }
    );
  },
  methods: {
    changeRem() {//1rem默认等于16px,需改为1rem等于100px（通过设置font-size的值来改，值等于多少就是多少）
      let Hight = document.documentElement.clientWidth;
      console.log(Hight);
      let ratio = 7.5;
      let HTML = document.documentElement;
      console.log(HTML);
      HTML.style.fontSize = Hight / ratio + "px";
    },
    preventScroll(e) { //去除上拉、下拉空白
        if (e._isScroller) return;
        e.preventDefault();
    }
  },
  destroyed(){
    document.body.removeEventListener('touchmove',this.preventScroll,{passive:false})
  }
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
body {
  font-size: 16px;
}
</style>
